<template>
<div>



  <el-form :inline="true" :model="ClientForm" class="demo-form-inline">
    <el-form-item label="客户名称:">
      <el-input v-model="ClientForm.clientName" clearable></el-input>
    </el-form-item>
    <el-form-item label="客户手机号:">
      <el-input v-model="ClientForm.clientPhone" clearable></el-input>
    </el-form-item>
    <el-form-item label="vip等级:">
      <el-input v-model="ClientForm.vipId" clearable></el-input>
    </el-form-item>
    <el-form-item label="创建时间:">
      <el-date-picker
          v-model="startandend"
          type="datetimerange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="clientList">搜索</el-button>
      <el-button type="primary" @click="openAdd">添加</el-button>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="dao">导出</el-button>
  <el-upload
      class="upload-demo"
      action="http://localhost:8000/carservice/carClient/upload"
      multiple
      limit="3">
    <el-button type="primary">导入</el-button>
  </el-upload>

  <el-table
      ref="multipleTable"
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        fixed
        prop="clientId"
        label="客户编号"
        width="100">
    </el-table-column>
    <el-table-column
        prop="clientName"
        label="客户名称"
        width="120">
    </el-table-column>
    <el-table-column
        prop="carName"
        label="车辆名称"
        width="120">
    </el-table-column>
    <el-table-column
        prop="clientPhone"
        label="客户手机号"
        width="120">
    </el-table-column>
    <el-table-column
        prop="clientEmail"
        label="客户邮箱"
        width="120">
    </el-table-column>
    <el-table-column
        prop="vipName"
        label="vip等级"
        width="120">
    </el-table-column>
    <el-table-column
        prop="remark"
        label="备注"
        width="120">
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="创建时间"
        width="220">
    </el-table-column>
    <el-table-column
        label="操作"
        width="200">
      <template slot-scope="scope">
        <el-button type="danger" @click="del(scope.row.clientId)">删除</el-button>
        <el-button type="primary" @click="update()">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form :model="saveForm" :rules="rules" ref="saveForm">
        <el-form-item label="客户名称" :label-width="formLabelWidth" prop="clientName">
          <el-input v-model="saveForm.clientName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车辆名称" :label-width="formLabelWidth" prop="carName">
          <el-input v-model="saveForm.carName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客户手机号" :label-width="formLabelWidth" prop="clientPhone">
          <el-input v-model="saveForm.clientPhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客户邮箱" :label-width="formLabelWidth" prop="clientEmail">
          <el-input v-model="saveForm.clientEmail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="vip等级" :label-width="formLabelWidth" prop="vipId">
          <el-select v-model="saveForm.vipId" placeholder="请选择VIP等级">
            <el-option v-for="v in vipData" :label="v.vipName" :value="v.vipId" :key="v.vipId"></el-option>
          </el-select>
        </el-form-item>
      <el-form-item label="省/市/县" :label-width="formLabelWidth">
        <el-cascader
            v-model="cityValue"
            :options="options"
            :props="PSXprops"
            @change="handleChange"></el-cascader>
      </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="saveForm.remark" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveClient('saveForm')">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import clientService from "@/api/clientService";
export default {
  data(){
    return{
      dialogFormVisible:false,
      formLabelWidth:'120px',
      saveForm:{},
      ClientForm:{},
      startandend:[],
      tableData:[],
      multipleSelection: [],
      vipData:[],
      cityValue: [],
      options: [],
      PSXprops:{
        value: 'id',
        label: 'name',
      },
      rules: {
        clientName: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
        carName: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
        clientPhone: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
        clientEmail: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
        vipId: [
          {required: true, message: '请输入', trigger: 'change'},
        ],
        remark: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
      },
    }
  },
  methods:{
    saveClient(formName){

      this.$refs[formName].validate((valid) => {
        if (valid) {

          if(this.cityValue!=null && this.cityValue.length>0){
            this.saveForm.pid=this.cityValue[0];
            this.saveForm.xid=this.cityValue[1];
            this.saveForm.sid=this.cityValue[2];
          }
          clientService.saveClient(this.saveForm).then(()=>{
            this.$message.success("添加成功");
          })

        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    vipList(){
      clientService.vipList().then(r=>{
          this.vipData=r.data.data;
      })
    },
    handleChange(value) {
      console.log(value);
    },
    openAdd(){
      this.dialogFormVisible=true;
      this.cityList();
      this.vipList();
    },
    dao(){
      location.href="http://localhost:8000/carservice/carClient/download"
        this.$message.success("正在导出");

    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    clientList(){
      clientService.clientList(this.ClientForm).then(r=>{
        this.tableData=r.data.data;
      })
    },
    cityList(){
      clientService.cityList().then(r=>{
        this.options=r.data.data;
      })
    }
  },
  created() {
    this.clientList();
  }
}
</script>

<style scoped>

</style>